<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PhotoSphereViewer - autorotate demo</title>

        <link rel="stylesheet" href="/dist/core/index.css" />
        <link rel="stylesheet" href="/dist/markers-plugin/index.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="photosphere"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "/node_modules/three/build/three.module.js",
                    "lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
                    "@photo-sphere-viewer/autorotate-plugin": "/dist/autorotate-plugin/index.module.js",
                    "@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
                }
            }
        </script>

        <script type="module">
            import { GUI } from 'lil-gui';
            import { Viewer } from '@photo-sphere-viewer/core';
            import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
            import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

            const viewer = new Viewer({
                container: 'photosphere',
                panorama: baseUrl + 'sphere.jpg',
                caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
                loadingImg: baseUrl + 'loader.gif',
                keyboard: 'always',
                navbar: [
                    'autorotate',
                    {
                        content: 'Set keypoints',
                        className: 'custom-button',
                        onClick: randomPoints,
                    },
                    {
                        content: 'Clear keypoints',
                        className: 'custom-button',
                        onClick: clearPoints,
                    },
                    'caption',
                    'fullscreen',
                ],
                plugins: [
                    [AutorotatePlugin, {
                        // autostartDelay: 1000,
                        // autostartOnIdle: false,
                        autorotateSpeed: '3rpm',
                        // autorotatePitch: '15deg',
                        // autorotateZoomLvl: 40,
                    }],
                    MarkersPlugin,
                ],
            });

            const markers = viewer.getPlugin(MarkersPlugin);
            const autorotate = viewer.getPlugin(AutorotatePlugin);

            function clearPoints() {
                markers.setMarkers(null);
                autorotate.setKeypoints(null);
            }

            function randomPoints() {
                const points = [];

                for (let i = 0, l = Math.random() * 2 + 4; i < l; i++) {
                    points.push({
                        position: {
                            yaw: ((i + Math.random()) * 2 * Math.PI) / l,
                            pitch: (Math.random() * Math.PI) / 3 - Math.PI / 6,
                        },
                        pause: i % 3 === 0 ? 2000 : 0,
                        tooltip: 'Test tooltip',
                    });
                }

                markers.setMarkers(
                    points.map((pt, i) => ({
                        id: '#' + i,
                        position: pt.position,
                        image: baseUrl + 'pictos/pin-red.png',
                        size: { width: 32, height: 32 },
                        anchor: 'bottom center',
                    }))
                );

                autorotate.setKeypoints(points);
            }

            window.viewer = viewer;

            const config = {
                autostartDelay: autorotate.config.autostartDelay,
                autostartOnIdle: autorotate.config.autostartOnIdle,
                autorotateSpeed: '3rpm',
                autorotatePitch: autorotate.config.autorotatePitch ?? '0deg',
                autorotateZoomLvl: autorotate.config.autorotateZoomLvl ?? 50,
            };

            const config2 = {
                overridePitch: autorotate.config.autorotatePitch !== null,
                overrideZoomLvl: autorotate.config.autorotateZoomLvl !== null,
            };

            const gui = new GUI({ title: 'Autorotate Plugin Options' });

            gui.add(config, 'autostartDelay', 0, 10000, 500);
            gui.add(config, 'autostartOnIdle');
            const overridePitch = gui.add(config2, 'overridePitch');
            const autorotatePitch = gui.add(config, 'autorotatePitch');
            const overrideZoomLvl = gui.add(config2, 'overrideZoomLvl');
            const autorotateZoomLvl = gui.add(config, 'autorotateZoomLvl', 0, 100, 1);

            overridePitch.name('[override pitch]');
            overridePitch.onChange((ok) => (ok ?  autorotatePitch.show() : autorotatePitch.hide()));
            config2.overridePitch ?  autorotatePitch.show() : autorotatePitch.hide();

            overrideZoomLvl.name('[override zoom lvl]');
            overrideZoomLvl.onChange((ok) => (ok ?  autorotateZoomLvl.show() : autorotateZoomLvl.hide()));
            config2.overrideZoomLvl ?  autorotateZoomLvl.show() : autorotateZoomLvl.hide();

            gui.onChange(() => {
                autorotate.setOptions({
                    ...config,
                    autostartDelay: config.autostartDelay,
                    autorotatePitch: config2.overridePitch ? config.autorotatePitch : null,
                    autorotateZoomLvl: config2.overrideZoomLvl ? config.autorotateZoomLvl : null,
                });
            });
        </script>
    </body>
</html>
